<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯视频首页轮番图</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <script src="./swiper-bundle.min.js"></script>
    <script src="../../三段/五月/jquery/jquery.js"></script>
</head>
<style>
    html,
    body {
        position: relative;
        /* height: 100%; */
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        width: 600px;
        height: 700px;
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 500px;
        height: 300px;
        object-fit: cover;
    }

    .swiper-slide img:hover {
        width: 600px;
        height: 400px;
        box-shadow: 5px 5px 5px rgba(146, 143, 143, 0.603);
    }

    .swiper-button-disabled {
        opacity: 0 !important;
    }
</style>

<body>
    <div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
        <div class="swiper-wrapper" id="swiper-wrapper-b16b4a4297397676" aria-live="polite"
            style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <!-- 图片 -->
            <!-- <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 9" style="width: 1918px;">Slide 1
            </div>
            <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 9" style="width: 1918px;">Slide 2
            </div>
            <div class="swiper-slide" role="group" aria-label="3 / 9" style="width: 1918px;">Slide 3</div>
            <div class="swiper-slide" role="group" aria-label="4 / 9" style="width: 1918px;">Slide 4</div>
            <div class="swiper-slide" role="group" aria-label="5 / 9" style="width: 1918px;">Slide 5</div>
            <div class="swiper-slide" role="group" aria-label="6 / 9" style="width: 1918px;">Slide 6</div>
            <div class="swiper-slide" role="group" aria-label="7 / 9" style="width: 1918px;">Slide 7</div>
            <div class="swiper-slide" role="group" aria-label="8 / 9" style="width: 1918px;">Slide 8</div>
            <div class="swiper-slide" role="group" aria-label="9 / 9" style="width: 1918px;">Slide 9</div> -->
        </div>
        <!-- 右箭头 -->
        <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
            aria-controls="swiper-wrapper-b16b4a4297397676" aria-disabled="false"></div>
        <!-- 左箭头 -->
        <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide"
            aria-controls="swiper-wrapper-b16b4a4297397676" aria-disabled="true"></div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
</body>
<script>
    $.ajax({
        url: 'https://liu.zzgoodqc.cn/banner',
        method: 'GET',
        dataType: 'json',
        success: function (res) {
            console.log(res);
            var str = ''
            for (let i in res.data) {
                str += `<div class="swiper-slide" role="group" aria-label="${+i + 1} / 9" style="width: 1918px;">
                    
                            <img src='${res.data[i].img}' alt=''>
                        </div>`
            }
            swiper.appendSlide(str)
        }
    })


    var swiper = new Swiper('.swiper', {
        slidesPerView: 3,
        direction: getDirection(),
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
            resize: function () {
                swiper.changeDirection(getDirection());
            },
        },
    });

    function getDirection() {
        var windowWidth = window.innerWidth;
        var direction = window.innerWidth <= 760 ? 'vertical' : 'horizontal';

        return direction;
    }



    // var swiper = new Swiper(".mySwiper", {
    //     pagination: {
    //         el: '.swiper-slide',
    //         clickable: true,
    //         renderBullet: function (index,className) {
    //             return '<span class="' + className + '">'+ (index + 1) + '</span>'
    //         }
    //     },
    //     navigation: {
    //         nextEl: ".swiper-button-next",  //右箭头
    //         prevEl: ".swiper-button-prev",  //左箭头
    //     },
    // });

</script>

</html>